<template>
	<view class="flex-col">
		<view class="flex-row user-chat-bottom">
			<view class="input-msg flex-row">
				<view class="flex-col justify-center" style="flex: 1;">
					<u-input type="textarea" placeholder="文明发言" v-model="text" cursor-spacing="32" height="40" :clearable="false"
						@click="showSelType=false" :show-confirmbar="false" />
				</view>
				<view class="add-type" @click="showSelType=true">
					+
				</view>
			</view>
			<view class="send" @tap="submit">发送</view>
		</view>
		<view class="send-file" :style="showSelType?'':'display:none'">
			<u-image height="128rpx" width="128rpx" src="/static/common/msg-photo.png" border-radius="26rpx"
				@click="chooseImage" />
			<u-image height="128rpx" width="128rpx" src="/static/common/msg-location.png" border-radius="26rpx"
				@click="getMapLocation" />
			<!-- <u-image height="128rpx" width="128rpx" src="/static/common/msg-pet-card.png" border-radius="26rpx" /> -->
		</view>
	</view>
</template>

<script>
	import utils from '../../utils/util.js';
	export default {
		data() {
			return {
				text: "",
				showSelType: false,
				header: {
					"content-type": "multipart/form-data",
					Authorization: uni.getStorageSync("cxbtoken"),
				},
			}
		},
		methods: {
			submit() {
				const resdata = {
					content: this.text,
					isPicture: 0,
				};
				this.$emit('submit', resdata);
				this.text = "";
			},
			chooseImage() {
				uni.chooseImage({
					count: 1,
					success: (res) => {
						console.log(res);
						const tempUrl = res.tempFilePaths[0];
						this.uploadImage(tempUrl).then(res => {
							if (res) {
								this.$emit('submit', res);
							}
						})
					}
				});
			},
			uploadImage(url) {
				return new Promise((resolve, reject) => {
					const resdata = {
						tempUrl: url,
						content: '',
						isPicture: 1,
					};
					uni.uploadFile({
						url: this.$config.mobeilURL + '/common/uploadFile',
						header: this.header,
						name: "file",
						filePath: url,
						success: (res) => {
							if (res.statusCode == 200) {
								//返回结果 此处需要按接口实际返回进行修改
								let data = JSON.parse(res.data);
								if (data.code == 200) {
									resdata.content = data.accessPath
									// if (type === 'image') { //图片 -此处无需修改
									// 	this.imageList.push(data.accessPath) //根据实际情况修改-（this.imageList不能改）
									// } else if (type === 'video') { //视频 -此处无需修改
									// 	 //根据实际情况修改-（this.videoList不能改）
									// }
								}
								resolve(resdata)
							} else {
								resolve(resdata)
							}
						},
						fail: function(res) {
							resolve(resdata)
						}
					})
				})
			},
			getMapLocation() {
				utils.chooseLocationInfo().then((res) => {
					const obj = {
						lat: 0,
						lng: 0
					};
					obj.lat = res.latitude;
					obj.lng = res.longitude;
					const resdata = {
						content: JSON.stringify(obj),
						isPicture: 2,
					};
					this.$emit('submit', resdata);
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.user-chat-bottom {
		width: 100%;
		height: max-content;

		.input-msg {
			min-height: 80rpx;
			background: #F4F4F4;
			border-radius: 52rpx;
			padding: 6rpx 16rpx 6rpx 32rpx;
			flex: 1;

			.add-type {
				margin-top: 10rpx;
				margin-left: 16rpx;
				width: 48rpx;
				height: 48rpx;
				background: #FCD610;
				border-radius: 50%;
				line-height: 48rpx;
				text-align: center;
				font-size: 48rpx;
			}
		}

		.send {
			margin-left: 38rpx;
			width: 192rpx;
			height: 80rpx;
			background: #FCD610;
			border-radius: 52rpx;
			text-align: center;
			line-height: 80rpx;
			font-weight: bold;
			font-size: 32rpx;
			color: #000000;
		}
	}

	.send-file {
		display: grid;
		grid-template-columns: 1fr 1fr 1fr 1fr;
		gap: 58rpx 24rpx;
		padding: 24rpx 0;
	}
</style>